<template>
  <view class="liabilitySignature">
    <view class="wrapper">
      <view class="buttonList">
        <view class="explain">请在上方空白处填写商户负责人姓名</view>

        <view class="clearAndsub">
          <button @click="retDraw" class="remove-btn delBtn">清除重写</button>
          <button @click="subCanvas" class="submit-btn subBtn">提交签名</button>
        </view>
      </view>
      <view class="handCenter">
        <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
          canvas-id="handWriting"></canvas>
        <!--用于旋转图片的canvas容器-->
        <!-- style="position: absolute; top: 9999" -->
        <canvas :style="{ width: canvasHeight + 'px', height: canvasWidth + 'px' }" canvas-id="handWriting2"
          style="position: fixed; top: -9999999999999rpx"></canvas>
      </view>
    </view>
    <view class="messageError" v-if="conerror">{{ conerror }}</view>
  </view>
</template>

<script>
  import {
    documentCompanySign
  } from "@/api/myself.js";
  import {
    Toast,
    navBack,
    debounce,
    getHeader,
    uploadFile
  } from "@/utils/util.js";
  export default {
    name: "liabilitySignature",
    data() {
      return {
        baseURL: this.$baseURL,
        conerror: "",
        drawShow: false,
        canvasName: "handWriting",
        ctx: null,
        startX: null,
        startY: null,
        canvasWidth: 0,
        canvasHeight: 0,
        selectColor: "black",
        lineColor: "#1A1A1A", // 颜色
        lineSize: 5, // 笔记倍数
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.ctx = uni.createCanvasContext("handWriting", this);
        uni
          .createSelectorQuery().in(this)
          .select(".handCenter")
          .boundingClientRect((rect) => {
            console.log(rect)
            this.canvasWidth = rect.width;
            this.canvasHeight = rect.height;
            /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
            // this.setCanvasBg("#fff");
          })
          .exec();
      });
    },
    methods: {
      // 笔迹开始
      uploadScaleStart(e) {
        this.startX = e.changedTouches[0].x;
        this.startY = e.changedTouches[0].y;
        //设置画笔参数
        //画笔颜色
        this.ctx.setStrokeStyle(this.lineColor);
        //设置线条粗细
        this.ctx.setLineWidth(this.lineSize);
        //设置线条的结束端点样式
        this.ctx.setLineCap("round"); //'butt'、'round'、'square'
        //开始画笔
        this.ctx.beginPath();
        this.drawShow = true;
      },
      // 笔迹移动
      uploadScaleMove(e) {
        //取点
        let temX = e.changedTouches[0].x;
        let temY = e.changedTouches[0].y;
        //画线条
        this.ctx.moveTo(this.startX, this.startY);
        this.ctx.lineTo(temX, temY);
        this.ctx.stroke();
        this.startX = temX;
        this.startY = temY;
        this.ctx.draw(true);
      },
      /**
       * 重写
       */
      retDraw() {
        this.ctx.clearRect(0, 0, 700, 730);
        this.ctx.draw();
        //设置canvas背景
        // this.setCanvasBg("#fff");
      },
      subCanvas: debounce(function() {
        this.sbumitBtn();
      }, 3000),
      sbumitBtn() {
        let _this = this;
        if (!_this.drawShow) return Toast("请签名");
        uni.canvasToTempFilePath({
          canvasId: "handWriting",
          fileType: "png",
          quality: 1, //图片质量
          success(res) {
            let canvasTwo = uni.createCanvasContext("handWriting2", _this);
            // 旋转90度  start
            canvasTwo.translate(10, _this.canvasHeight / 2 - 70);
            canvasTwo.rotate((-90 * Math.PI) / 180);
            canvasTwo.drawImage(
              res.tempFilePath,
              0,
              0,
              _this.canvasWidth,
              _this.canvasHeight
            );
            // end

            canvasTwo.draw(false, () => {
              uni.canvasToTempFilePath({
                // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
                canvasId: "handWriting2",
                fileType: "png",
                quality: 1, //图片质量
                success(res2) {
                  // 调用uni.uploadFile上传图片即可
                  _this.$emit('signed', res2)
                },
              }, _this);
            });

            // //保存到系统相册
            // uni.saveImageToPhotosAlbum({
            //   filePath: res.tempFilePath,
            //   success(res) {
            //     uni.showToast({
            //       title: "已成功保存到相册",
            //       duration: 2000,
            //     });
            //   },
            // });
          },
        }, _this);
      },
      //预览
      previewCanvasImg() {
        uni.canvasToTempFilePath({
          canvasId: "handWriting",
          fileType: "jpg",
          quality: 1, //图片质量
          success(res) {
            uni.previewImage({
              urls: [res.tempFilePath], //预览图片 数组
            });
          },
        }, this);
      },
      //设置canvas背景色  不设置  导出的canvas的背景为透明
      //@params：字符串  color
      setCanvasBg(color) {
        /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
        //rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
        //这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
        this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
        // ctx.setFillStyle('red')
        this.ctx.setFillStyle(color);
        this.ctx.fill(); //设置填充
        this.ctx.draw(); //开画
      },
    },
  };
</script>

<style lang="scss" scoped>
  .liabilitySignature {
    flex: 1;
    background: #f6f6f6;
    padding: 16rpx 26rpx;
    width: 100%;
    height: 100%;

    .wrapper {
      display: flex;
      overflow-y: auto;
      height: 100%;
      background: #fff;
      border-radius: 9rpx 9rpx 9rpx 9rpx;
    }

    .buttonList {
      position: relative;
      flex-direction: column;
      width: 140rpx;

      .explain {
        margin-top: 250rpx;
        margin-left: -160rpx;
        font-size: 28rpx;
        color: #666666;
        width: 450rpx;
        // border: 1px solid red;
        transform: rotate(90deg);
      }

      .clearAndsub {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: space-between;

        position: absolute;
        bottom: 80rpx;
        left: -30rpx;

        button {
          width: 200rpx;
          transform: rotate(90deg);
        }

        .subBtn {
          margin-top: 130rpx;
        }
      }
    }

    .handCenter {
      border-left: 2rpx dashed #dedcdc;
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;

      .handWriting {
        background: #fff;
        width: 100%;
        height: 100%;
      }

      .handWriting2 {
        background: pink;
        width: 100%;
        height: 100%;
      }
    }

    .messageError {
      position: absolute;
      top: 40%;
      left: 25%;
      transform: rotate(90deg);

      padding: 0rpx 20rpx;
      height: 60rpx;
      font-size: 28rpx;
      color: #fff;
      line-height: 55rpx;
      background: black;
      border-radius: 8rpx;
      z-index: 99999;
    }
  }
</style>